<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-22 15:45:02
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 创建单位页 -->
<script lang="ts" setup>
import type { FireInspectionPerson } from '@/genapi/fireProduct';
import { fireProductFireApiInspectionPersonJobQuerybyPost } from '@/genapi/fireProduct';
import { useUserStore } from '@/stores/user';
defineOptions({ name: 'Success' });
const userStore = useUserStore();

const router = useRouter();

const dialogVisible2 = ref(false);

const back = () => {
	router.replace({ path: '/home' });
};

const again = () => {
	router.replace({ path: '/home/examPage' });
};

onUnmounted(() => {
	userStore.examDetails = {};
});

const res = ref({
	score: 8,
	startDate: '2020-02-02',
	endDate: '2020-05-02',
});
</script>

<template>
	<div class="successPage" v-if="Number(userStore.examDetails.examScore) >= 80">
		<nut-navbar title="考试成绩" left-show @click-back="back"></nut-navbar>
		<img src="./assets/success.png" />
		<span class="examResult">考试成绩为 {{ userStore.examDetails.examScore ?? '--' }} 分，考核合格</span>
		<span class="validityPeriod"
			>有效期限：{{ userStore.examDetails.certificateStartDate }}-{{
				userStore.examDetails.certificateExpireDate
			}}</span
		>
		<nut-button type="info" @click="back">返回首页</nut-button>
		<nut-button plain type="info" @click="again">再考一次</nut-button>
	</div>
	<div class="successPage" v-else>
		<nut-navbar title="考试成绩" left-show @click-back="back"></nut-navbar>
		<img src="./assets/failed.png" />
		<span class="examResult">考试成绩为 {{ userStore.examDetails.examScore ?? '0' }} 分，考核不合格</span>
		<nut-button type="info" @click="again">再考一次</nut-button>
		<nut-button plain type="info" @click="back">返回首页</nut-button>
	</div>
</template>

<style scoped lang="scss">
.successPage {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 100vh;
	--nut-button-primary-border-color: #000;
	--nut-primary-color: #165dff;

	img {
		width: 200px;
		height: 200px;
		margin-top: 60px;
	}
	.validityPeriod {
		font-size: 12px;
		color: rgb(167, 167, 167);
		margin-top: 7px;
		margin-bottom: 40px;
	}
	.nut-button {
		width: 90%;
		margin-top: 16px;
	}
}
</style>
